<template>
  <view class="face-cover-img">
    <view class="face-camera-box">
      <image
        class="face-camera-box-img"
        src="/static/login/xiangji.png"
        mode=""
      ></image>

      <view class="face-camera" v-show="!rzShow">
        <camera
          device-position="front"
          mode="normal"
          style="height: 100%; width: 100%;"
          @initdone="initCamera"
        >
        </camera>
      </view>
    </view>
    <u-overlay :show="rzShow">
      <view class="popuWarp">
        <view class="popuRz">
          <image src="" mode=""></image>
        </view>
      </view>
    </u-overlay>
  </view>
</template>
<script>
//人脸识别(使用自己的接口)
export default {
  data() {
    return {
      rzShow: false,
      tiems: 5,
      lights: false,
      cameraContext: {},
      windowHeight: 0,
      windowWidth: 0,
      cameraHeight: 0,
      type: "video",
      state: true,
      count: 3,
      timer: null,
      maskBg: ``,
      faceState: false,
      initState: false, // 设置初始状态，等待相机初始化成功
      show: {
        updateTip: false,
        cameraScope: false,
      },
      file: "",
      key: "",
      types: "",
      orderId: "",
      collateralId: "",
    };
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  onLoad(options) {
    if (uni.createCameraContext) {
      setTimeout(() => {
        this.cameraContext = uni.createCameraContext();
      }, 200);
    } else {
      // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
      uni.showModal({
        title: "提示",
        content:
          "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。",
      });
    }
    let tiem = setInterval(() => {
      this.tiems--;
      if (this.tiems < 1) {
        clearInterval(tiem);
        this.overCamera();
      }
    }, 1000);
  },
  onHide() {},
  methods: {
    // 初始化成功
    initCamera() {
      this.cameraContext.startRecord({
        quality: "low",
        success: (res) => {},
        fail: (err) => {
          console.log(err);
        },
      });
    },
    // 拍照或者视频录制结果
    overCamera() {
      console.log("this.cameraContext", this.cameraContext);
      this.cameraContext.stopRecord({
        success: async (res) => {
          console.log("视频录制成功", res);
          this.rzShow = true;
          uni.uploadFile({
            url: this.vuex_baseUrl + "/common/upload",
            filePath: res.tempVideoPath,
            name: "file",
            header: {
              "login-platform": "MINI_PROGRAM",
              Authorization: "Bearer " + this.vuex_token,
            },

            success: async (uploadFileRes) => {
              let updata = JSON.parse(uploadFileRes.data);
              console.log("updata", updata);
            },
          });
        },
        complete() {
		  uni.redirectTo({
		  	url: '/pages/faceIdentification/faceIdentificationFinish'
		  })
          console.log("走进方法了");
        },
      });
    },
  },
};
</script>
<style lang="scss">
$face-size: 500rpx;

.popuWarp {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

  .popuRz {
    margin: auto;
    width: 240rpx;
    height: 240rpx;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 180rpx;
      height: 180rpx;
    }
  }
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 100rpx;
  z-index: 1000;
  text-align: center;
  color: #e6e6e6;
  font-size: 32rpx;
  font-weight: 500;
}

.face-cover-img {
  background-color: #F8F9FC;
  height: 100vh;
  position: relative;

  .face-camera-box {
    width: 750rpx;
    height: 1000rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 16rpx;

    .face-camera-box-title {
      position: absolute;
      top: 140rpx;
      left: 0;
      right: 0;
      color: #F8F9FC;
      font-size: 40rpx;
      font-weight: 700;
      text-align: center;
      z-index: 1000;
    }

    .face-camera-box-img {
      width: $face-size;
      height: $face-size;
      position: absolute;
      left: 142rpx;
      right: 0;
      top: 263rpx;
      z-index: 999;
    }

    .face-camera {
      width: $face-size;
      height: $face-size;
      position: relative;
      overflow: hidden;
	  border-radius: 50%;
    }
  }
}
</style>